<template>
	<div class="wrapper">
	 <swiper :options="swiperOption" v-if="showSwiper">
	    <swiper-slide v-for="(item,index) of list" :key="item.id">
	    	<img class="swiper-img" :src="item.imgUrl" alt="">
	   	</swiper-slide>
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	 </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list:Array
  },
  data () {
      return {
        swiperOption: {
        	pagination: '.swiper-pagination',
        	loop: true
        }
        // swiperList: [
        //     {
        //     	id: '0001',
        //     	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1707/90/2ab6fd356529aa02.jpg_750x200_4120afc5.jpg'
        //     },
        //     {
        //     	id: '0002',
        //     	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/98/0a2e0bd8eb0c0802.png_750x200_0a34d4a8.png'
        //     },
        //     {
        //     	id: '0003',
        //     	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1805/13/6332699c44387902.jpg_750x200_b7afa4f8.jpg'
        //     }
        // ]
      }
    },
    computed: {
        showSwiper () {
            return this.list.length
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
	/*样式穿透*/
	.wrapper >>> .swiper-pagination-bullet-active
		background: #FFF !important
	.wrapper
		width: 100%
		background: #eee
		/*height: 31.25vw*/
		overflow: hidden
		height: 0
		padding-bottom: 26.57%
	.swiper-img
		width: 100%
</style>
